<template>
	<view class="container">
		<view style="padding: 30rpx;background-color: #EED146;">
			<view class="font-size-base11"><u-icon class="mr-10" name='bell' size="28"></u-icon>  安全提醒：切勿相信任何交钱刷单的合作！</view>
		</view>
		
		<view class="p-30">	
			<view class="p-30 bg-white mb-20 section border-radius-base address">
				<view class="font-size-lg font-weight-bold mb-30 title">任务介绍</view>
				<view class="p-20 text-over mb-20 bg-grey" @tap="jump('/pages/notice/detail?id='+message.take.id)">来自任务：{{message.task.demand}}</view>
			</view>
			
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'><view style="width: 12rpx;background-color: #EED146;height: 36rpx;display: inline-block;vertical-align: -6rpx;border-radius: 20rpx;margin-right: 20rpx;"></view>商家联系方式 <text class="text-color-assist font-size-sm ml-20 font-weight-normal">(联系请说明来自人人约拍)</text> </view>
				</view>
				<view class="mb-10 d-flex justify-content-between" v-if="message.task.need==1||message.task.need==2">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">商家:</view>
						<view>{{message.task.shop_name}}</view>
					</view>
					<view v-if="message.status!=0&&message.status!=1" class="text-color-primary" @tap="copy(message.task.shop_name)">复制</view>
				</view>
				<view class="mb-10 d-flex justify-content-between">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">手机号:</view>
						<view>{{message.task.shop_mobile}}</view>
					</view>
					<view v-if="message.status!=0&&message.status!=1" class="text-color-primary" @tap="tel(message.task.shop_mobile)">拨打</view>
				</view>
				<view class="mb-10 d-flex justify-content-between">
					<view class="d-flex flex-shrink-0">
						<view class="mr-20 text-color-assist" style="width: 120rpx;">微信号:</view>
						<view>{{message.task.shop_wechat}}</view>
					</view>
					<view v-if="message.status!=0&&message.status!=1" class="text-color-primary" @tap="copy(message.task.shop_wechat)">复制</view>
				</view>
				
				<view class="mb-10 d-flex justify-content-between">
					<view class="d-flex">
						<view class="mr-20 text-color-assist flex-shrink-0" style="width: 120rpx;">地址:</view>
						<view>{{message.task.shop_address}}</view>
					</view>
					<view v-if="message.status!=0&&message.status!=1" class="text-color-primary flex-shrink-0" @tap="copy(message.task.shop_address)">复制</view>
				</view>
			</view>
			
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'>上传买家秀作品</view>
				</view>
				<view class="d-flex align-items-center">
					<u-upload width="160" height="160" uploadText="上传图片" iconImg='/static/image.png' :mediaType='imageMediaType' :file-list="imagesMedia" :maxCount="message.status==99?imagesMedia.length:9" :multiple='true' :previewFullImage="true" :auto-upload='false' @on-list-change="imagesChange"></u-upload>
				</view>
			</view>
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between align-items-center">
					<view class='font-size-lg font-weight-bold'>上传种草视频</view>
				</view>
				<view class="d-flex align-items-center">
					<u-upload width="160" height="160" uploadText="上传视频" iconImg='/static/video.png' :mediaType='videoMediaType' :file-list="videoMedia" :maxCount="1" :multiple='false' :previewFullImage="true" :auto-upload='false' @on-list-change="videoChange"></u-upload>
				</view>
			</view>
			
			<view class="font-size-base text-color-grey">
				<view class="mb-10">温馨提示：</view>
				<view class="mb-10">1.平台禁止一切网店刷单操作。</view>
				<view class="mb-10">2.平台禁止一切色情私房拍照。</view>
				<view class="mb-10">3.切勿私下缴纳费用或定金的合作，发生经济纠纷小程序概不负责。</view>
			</view>
		</view>
		
		<!--  end -->
		<view class="sign-up-footer d-flex just-content-around align-items-center">
			<button v-if="message.status==1||message.status==2" type="primary" @tap="confirmUpload">上传作品</button>
			<button v-if="message.status==2" disabled="true" type="default">等待商家确认</button>
			<button v-if="message.status==99" disabled="true" type="default">任务已完成</button>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			id:'',
			message:'',
			imageMediaType:['image'],
			videoMediaType:['video'],
			videoDuration:'',
			imagesMedia:[],
			videoMedia:[],
			receiptImages:[]
		}
	},
	computed:{
		...mapState(['hasLogin', 'userInfo', 'contact', 'customer']),
	},
	onLoad(options) {
		this.id = options.id;
		this.getMessage()
	},
	methods:{
		imagesChange(lists, name) {
			this.imagesMedia = lists;
		},
		videoChange(lists, name) {
			this.videoDuration = lists[0].file.info.duration;
			this.videoMedia = lists;
		},
		async getMessage() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			let res = await this.$api('modelSignDetail')
			this.message = res.data;
			uni.hideLoading();
		},
		confirmUpload() {
			if(this.message.model_photo_nums>0) {
				if(this.imagesMedias.length==0) {
					this.$u.toast("请上传作品图片！");return;
				}
				
				if(this.imagesMedias.length<this.message.model_photo_nums) {
					this.$u.toast("作品图片数量未达到任务要求！");return;
				}
			}
			
			if(this.message.task.model_video_seconds>0) {
				if(!this.videoDuration) {
					this.$u.toast("请上传作品视频！");return;
				}
				
				if(this.videoDuration<this.message.task.model_video_seconds) {
					this.$u.toast("作品视频长度未达到任务要求！");return;
				}
			}
			
			let that = this;
			uni.showModal({
				title: '提示',
				content:'确认提交？',
				confirmText:'确认',
				success (res) {
					if (res.confirm) {
						that.upload();
					}
				}
			})
		},
		async upload() {
			
			uni.showLoading({
				mask: true,
				title: '保存中...'
			});
			
			this.message.status = 2;
			uni.redirectTo({url:"/pages/jump/jump?txt=任务作品上传成功"})
		},
		tel(mobile) {
			this.$f.tel(mobile);
		},
		copy(text) {
			this.$f.copy(text);
		},
		jump(url) {
			uni.navigateTo({
				url:url
			})
		},
		toContact() {
			// #ifdef MP-WEIXIN
			const version = uni.getSystemInfoSync().SDKVersion
			if (this.$f.compareVersion(version, '2.19.0') >= 0) {
				if(this.customer) {
					uni.openCustomerServiceChat({
						extInfo: {url: this.customer.url},
						corpId: this.customer.corpId,
						success(res) {}
					})
				}else{
					uni.showModal({
						title: '提示',
						content: '该小程序暂未绑定微信客服！'
					})
				}
			} else {
				// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				})
			}
			// #endif
		}
	}
}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}	
	.section {
		box-sizing: border-box;
		
		textarea {
			background-color: #f7f7f7;
			padding: 30rpx;
			width: 100%;
			height: 200rpx;
		}
	}
	
	.user-item {
		display: flex;
		justify-content: center; // 内容自适应：上下居中
		align-items: center; // 子项对齐方式：左右居中
		border-bottom: 2rpx solid #eee;
		
		.user-item-user {
			flex: 1;
			
			.cxplain {
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
	.sign-up-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: #FFFFFF;
		z-index: 10;
		padding: 20rpx 10rpx;
		
		button {
			height: 100%;
			font-size: $font-size-lg;
			border-radius: 100rpx !important;
			line-height: 80rpx;
			padding: 0 80rpx;
		}
	}
</style>
